<template>
  <view class="appointment-choose">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">选择预约类型</text>
      <text class="page-desc">请选择您要进行的预约类型</text>
    </view>
    
    <!-- 预约类型选择 -->
    <view class="appointment-types">
      <!-- 普通预约申请 -->
      <view class="type-card" @click="goToFoodAppointment">
        <view class="card-icon food-icon">
          <uni-icons type="checkmarkempty" size="40" color="#fff"></uni-icons>
        </view>
        <view class="card-content">
          <text class="card-title">普通预约申请</text>
          <text class="card-desc">农户直采，进入市场销售农产品</text>
          <view class="card-features">
            <text class="feature-item">• 农户直接采购</text>
            <text class="feature-item">• 需提供产地证明</text>
            <text class="feature-item">• 快速审核流程</text>
          </view>
        </view>
        <uni-icons type="right" size="20" color="#999" class="card-arrow"></uni-icons>
      </view>
      
      <!-- 农批市场预约 -->
      <view class="type-card" @click="goToMarketAppointment">
        <view class="card-icon market-icon">
          <uni-icons type="shop" size="40" color="#fff"></uni-icons>
        </view>
        <view class="card-content">
          <text class="card-title">农批市场预约</text>
          <text class="card-desc">从其他市场采购，需要更多凭证</text>
          <view class="card-features">
            <text class="feature-item">• 其他市场采购</text>
            <text class="feature-item">• 需上传进货凭证</text>
            <text class="feature-item">• 主体资质必填</text>
          </view>
        </view>
        <uni-icons type="right" size="20" color="#999" class="card-arrow"></uni-icons>
      </view>
    </view>
    
    <!-- 查看预约记录 -->
    <view class="bottom-action">
      <view class="action-button" @click="goToRecords">
        <uni-icons type="list" size="20" color="#1890ff"></uni-icons>
        <text class="action-text">查看我的预约记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 跳转到普通预约申请
    goToFoodAppointment() {
      uni.navigateTo({
        url: '/pages/appointment/food'
      })
    },
    
    // 跳转到农批市场预约
    goToMarketAppointment() {
      uni.navigateTo({
        url: '/pages/appointment/market'
      })
    },
    
    // 跳转到预约记录
    goToRecords() {
      uni.navigateTo({
        url: '/pages/appointment/record'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.appointment-choose {
  min-height: 100vh;
  background-color: #f5f6f8;
  padding: 20rpx;
}

.page-header {
  padding: 40rpx 20rpx;
  text-align: center;
  
  .page-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .page-desc {
    display: block;
    font-size: 28rpx;
    color: #999;
  }
}

.appointment-types {
  padding: 0 20rpx;
}

.type-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  .card-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
    flex-shrink: 0;
    
    &.food-icon {
      background: linear-gradient(135deg, #667eea, #764ba2);
    }
    
    &.market-icon {
      background: linear-gradient(135deg, #52c41a, #73d13d);
    }
  }
  
  .card-content {
    flex: 1;
    
    .card-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .card-desc {
      display: block;
      font-size: 26rpx;
      color: #999;
      margin-bottom: 20rpx;
    }
    
    .card-features {
      .feature-item {
        display: block;
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
  
  .card-arrow {
    flex-shrink: 0;
    margin-left: 20rpx;
  }
}

.bottom-action {
  margin-top: 60rpx;
  padding: 0 20rpx;
  
  .action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25rpx;
    background: #fff;
    border-radius: 12rpx;
    border: 2rpx solid #1890ff;
    
    &:active {
      opacity: 0.8;
    }
    
    .action-text {
      font-size: 28rpx;
      color: #1890ff;
      margin-left: 10rpx;
    }
  }
}
</style>